
{% capture form_id_wrap %}product-card-{{ section.id }}-{{ index }}{% endcapture %}
{% assign form_id = form_id_wrap %}

<product-form class="position-relative">
  {% form "product", product, id: form_id, class: 'as-add-cart-form as-async-add-form', novalidate: 'novalidate' %}
  <div class="mb-2">
    {% if product.has_only_default_variant %}
      <input class="as-form-quantity" name="id" value="{{ product.selected_or_first_available_variant.id }}" type="hidden">
    {% else %}
      {% if product.available %}
        {% assign use_variant = true %}
        {% if show_quick_buy %}
          <select name="id" class="as-form-quantity pe-6 select-width form-select ps-0 small border-0 as-variant-select bg-transparent {{ text_color }} position-relative py-1" style="z-index: 2; max-width: 100%;">
            {% for variant in product.variants %}
              <option class="as-variant-option" value="{{ variant.id }}" {% if variant.available == false %} disabled="disabled" {% endif %} {% if variant.available == true %} name="optional" {% endif %} {% if variant == product.first_available_variant %}selected{% endif %}>{{ variant.title }}</option>
            {% endfor%}
          </select>
        {% endif %}
      {% endif %}
    {% endif %}
  </div>
  {% if product.available and show_quick_buy %}
    {% for variant in product.variants %}
      {% if variant.available %}
        <div data-product-price="{{ product.selected_or_first_available_variant.price }}" data-variant-price="{{ variant.price }}" class="as-variant-price {% unless variant == product.first_available_variant %}d-none{% endunless %}">
          {% render 'price', product: product, price_class: '', use_variant: use_variant, custom_variant: variant %}
        </div>
      {% endif %}
    {% endfor %}
  {% else %}
    {% render 'price', product: product, price_class: ''%}
  {% endif %}
  {% endform %}
</product-form>